<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>公路供应商管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--    <link rel="stylesheet" href="../web/resource/css/allcss/allCss.css" type="text/css">-->
    <style>

    </style>
</head>
<body>
<div class="query-container">
    <div class="form-row">
        <!-- 批次号 -->
        <div class="form-item">
            <label class="form-label">批次号：</label>
            <input type="text"
                   class="form-input"
                   placeholder="请输入批次号">
        </div>
        <div class="form-item">
            <label class="form-label">运单号：</label>
            <input type="text"
                   class="form-input"
                   placeholder="请输入运单号">
        </div>
        <div class="form-item">
            <label class="form-label">车架号：</label>
            <input type="text"
                   class="form-input"
                   placeholder="请输入车架号">
        </div>
        <div class="form-item">
            <label class="form-label">委托商：</label>
            <input type="text"
                   class="form-input"
                   placeholder="请输入委托商">
        </div>
        <div class="form-item">
            <label class="form-label">提车地点：</label>
            <input type="text"
                   class="form-input"
                   placeholder="请输入提车地点">
        </div>
        <div class="form-item">
            <label class="form-label">收车地点：</label>
            <input type="text"
                   class="form-input"
                   placeholder="请输入收车地点">
        </div>
        <div class="form-item">
            <label class="form-label">起运地：</label>
            <input type="text"
                   class="form-input"
                   placeholder="请输入起运地">
        </div>
        <div class="form-item">
            <label class="form-label">目的地：</label>
            <input type="text"
                   class="form-input"
                   placeholder="请输入目的地">
        </div>
        <div class="form-item">
            <label class="form-label">起运港：</label>
            <input type="text"
                   class="form-input"
                   placeholder="请输入起运港">
        </div>
        <div class="form-item">
            <label class="form-label">目的港：</label>
            <input type="text"
                   class="form-input"
                   placeholder="请输入目的港">
        </div>
        <div class="form-item">
            <label class="form-label">品牌：</label>
            <input type="text"
                   class="form-input"
                   placeholder="请输入品牌">
        </div>
        <div class="form-item">
            <label class="form-label">运输方式：</label>
            <select class="form-input form-select" data-type="transportMode">
                <option value="">全部</option>
                <option value="1">公路</option>
                <option value="2">水路</option>
                <option value="3">水陆联运</option>
            </select>
        </div>
        <div class="form-item">
            <label class="form-label">计划时间：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="ID-laydate-demo1" placeholder="yyyy-MM-dd">
            </div>
            -
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="ID-laydate-demo2" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <!-- 状态选择 -->
        <div class="form-item">
            <label class="form-label">状态：</label>
            <select class="form-input form-select" data-type="state">
                <option value="">全部</option>
                <option value="0">待分配运输</option>
                <option value="1">已分配运输</option>
                <option value="2">运输中</option>
                <option value="3">已交车</option>
            </select>
        </div>
    </div>
    <!-- 操作按钮 -->
    <div class="action-buttons">
        <button class="btn btn-reset">重置</button>
        <button class="btn btn-query">查询</button>
        <button class="btn btn-add">新增</button>
        <button class="btn btn-import">导入Excel</button>
    </div>
</div>
<div class="table-container">
    <table class="data-table">
        <thead class="data-table-thead">
        <tr>
            <th>序号</th>
            <th>批次号</th>
            <th>运单号</th>
            <th>车架号</th>
            <th>委托商</th>
            <th>提车地点</th>
            <th>起运地</th>
            <th>目的地</th>
            <th>起运地</th>
            <th>目的港</th>
            <th>收车单位</th>
            <th>品牌</th>
            <th>型号</th>
            <th>运输方式</th>
            <th>计划时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <!-- 分页 -->
</div>
<div class="pagination">
    <span>共0条</span>
    <select class="data-table-page" >
        <option class="" value="10" selected>10条/页</option>
        <option class="" value="20">20条/页</option>
        <option class="" value="50">50条/页</option>
    </select>
    <div class="page-num">
        <button class="pre-button">＜</button>
        <span>1</span>
        <button class="next-button">＞</button>
    </div>
</div>
<!-- 新增模态框 -->
<div class="modal-mask" id="modal-mask-add">
    <div class="modal-content" style="width: 600px;">
        <h3 class="modal-title">
            新增运输计划
            <button class="modal-close-btn">×</button>
        </h3>
        <form class="modal-form" id="modal-form-add">
            <div class="form-column">
                <!-- 左列 -->
                <div class="form-col">
                    <div class="form-item">
                        <label>批次号：</label>
                        <input type="text" id="add-batchNumber" required>
                    </div>
                    <div class="form-item">
                        <label>运单号：</label>
                        <input type="text" id="add-waybillNo">
                    </div>
                    <div class="form-item">
                        <label>车架号：</label>
                        <input type="text" id="add-frameNumber" required>
                    </div>
                    <div class="form-item">
                        <label>计划时间：</label>
                        <input type="text" class="layui-input" id="add-planDate">
                    </div>
                    <div class="form-item">
                        <label>起始地类型：</label>
                        <select id="add-startType">
                            <option value="1">区域</option>
                            <option value="2">港口</option>
                        </select>
                    </div>
                    <div class="form-item">
                        <label>起始区域：</label>
                        <input type="text" id="add-departurePlace">
                    </div>
                </div>

                <!-- 右列 -->
                <div class="form-col">
                    <div class="form-item">
                        <label>交车地类型：</label>
                        <select id="add-endType">
                            <option value="1">区域</option>
                            <option value="2">港口</option>
                        </select>
                    </div>
                    <div class="form-item">
                        <label>运输方式：</label>
                        <select id="add-taskMode">
                            <option value="1">公路</option>
                            <option value="2">水路</option>
                            <option value="3">水陆联运</option>
                        </select>
                    </div>
                    <div class="form-item">
                        <label>起始港：</label>
                        <input type="text" id="add-departurePort">
                    </div>
                    <div class="form-item">
                        <label>目的港：</label>
                        <input type="text" id="add-arrivePort">
                    </div>
                    <div class="form-item">
                        <label>交车区域：</label>
                        <input type="text" id="add-arrivePlace">
                    </div>
                    <div class="form-item">
                        <label>提车地点：</label>
                        <input type="text" id="add-pickCar">
                    </div>
                    <div class="form-item">
                        <label>收车单位：</label>
                        <input type="text" id="add-collectCar">
                    </div>
                    <div class="form-item">
                        <label>品牌：</label>
                        <input type="text" id="add-brand">
                    </div>
                    <div class="form-item">
                        <label>车型：</label>
                        <input type="text" id="add-modelName">
                    </div>
                    <div class="form-item">
                        <label>颜色：</label>
                        <input type="text" id="add-color">
                    </div>
                </div>
            </div>
            <div class="modal-buttons">
                <button type="button" class="btn-close">关闭</button>
                <button type="submit" class="btn-submit">新增</button>
            </div>
        </form>
    </div>
</div>
<div class="modal-mask" id="modal-mask-detail">
    <div class="modal-content">
        <h3 class="modal-title">
            运输详情
            <button class="modal-close-btn">×</button>
        </h3>
        <div class="modal-body">
            <!-- 运输计划信息 -->
            <div class="detail-section">
                <h4 class="detail-subtitle">运输计划信息</h4>
                <div class="detail-row">
                    <span class="detail-label">批次号：</span>
                    <span id="detail-batchNumber" class="detail-value"></span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">委托商：</span>
                    <span id="detail-consignorName" class="detail-value"></span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">运输方式：</span>
                    <span id="detail-transportMode" class="detail-value"></span>
                </div>
            </div>

            <!-- 委托车信息 -->
            <div class="detail-section">
                <h4 class="detail-subtitle">委托车信息</h4>
                <div class="detail-row">
                    <span class="detail-label">车架号：</span>
                    <span id="detail-frameNumber" class="detail-value"></span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">运单号：</span>
                    <span id="detail-waybillNo" class="detail-value"></span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">计划时间：</span>
                    <span id="detail-planDate" class="detail-value"></span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">提车地点：</span>
                    <span id="detail-pickCar" class="detail-value"></span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">收车地点：</span>
                    <span id="detail-collectCar" class="detail-value"></span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">品牌：</span>
                    <span id="detail-brandName" class="detail-value"></span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">型号：</span>
                    <span id="detail-modelName" class="detail-value"></span>
                </div>
            </div>

            <!-- 操作记录 -->
            <div class="detail-section">
                <h4 class="detail-subtitle">操作记录</h4>
                <div id="detail-operationLogs" class="detail-logs">
                    暂无数据
                </div>
            </div>
        </div>
        <div class="modal-buttons">
            <button type="button" class="btn-close">关闭</button>
        </div>
    </div>
</div>
<script>
    const nextButton = document.querySelector('.next-button')
    const preButton = document.querySelector('.pre-button')
    //渲染
    function renderTable(data) {
        document.querySelector('.pagination span:first-child')
            .textContent = `共${data.data.total}条`;
        const tbody = document.querySelector('.data-table tbody');

        // 更新页码显示
        document.querySelector('.page-num span').textContent = data.data.current;

        if (data.data.current >= data.data.pages){
            nextButton.disabled = true;
            nextButton.style.opacity = "0.5";
        }else {
            nextButton.disabled = false;
            nextButton.style.opacity = "1";
        }

        if (data.data.current <= 1){
            preButton.disabled = true;
            preButton.style.opacity = "0.5";
        }else {
            preButton.disabled = false;
            preButton.style.opacity = "1";
        }

        tbody.innerHTML = ''; // 清空旧数据
        data.data.records.
        slice( // 根据分页参数切割数据
            (data.data.current - 1)
            * data.data.size,
            data.data.current * data.data.size
        ).forEach((item, index) => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${(data.data.current - 1) * data.data.size + index + 1}</td>
                <td>${item.batchNumber || ''}</td>
                <td>${item.waybillNo || ''}</td>
                <td>${item.frameNumber || ''}</td>
                <td>${item.consignorName || ''}</td>
                <td>${item.pickCar || ''}</td>
                <td>${item.departurePlace || ''}</td>
                <td>${item.arrivePlace || ''}</td>
                <td>${item.departurePort || ''}</td>
                <td>${item.arrivePort || ''}</td>
                <td>${item.collectCar || ''}</td>
                <td>${item.brandName || ''}</td>
                <td>${item.modelName || ''}</td>
                <td>${item.transportMode ===1? "公路" : (item.transportMode ===2 ? "水路":"水路联运")}</td>
                <td>${formatDateTime(item.planDate)}</td>
                <td>${getStatusText(item.state)}</td>
                <td>
                     <button class="table-detail-btn">详情</button>
                </td>
    `;
            // 绑定操作按钮事件
            const detailBtn = tr.querySelector('.table-detail-btn');
            detailBtn.addEventListener('click', () => showHighDetail(item));
            tbody.appendChild(tr);
        });
    }
    document.querySelector('.btn-query').addEventListener('click',function (){
        fetchData('query');
    })
    document.querySelector('.pre-button').addEventListener('click',function (){
        fetchData('pre');
    })
    document.querySelector('.next-button').addEventListener('click',function (){
        fetchData('next');
    })
    // 统一请求方法
    async function fetchData(type) {

        let { page, pageSize } = getPaginationParams();

        if (type === 'pre') {
            page = Math.max(1, page - 1)  // 确保页码不小于1
            document.querySelector('.page-num span').textContent = page  // 同步更新页码显示
        }else if (type === 'next'){
            page = Math.max(1, page + 1)  // 确保页码不小于1
            document.querySelector('.page-num span').textContent = page  // 同步更新页码显示
        }

        const queryParams = {
            batchNumber: document.querySelector('input[placeholder="请输入批次号"]').value,
            waybillNo: document.querySelector('input[placeholder="请输入运单号"]').value,
            frameNumber: document.querySelector('input[placeholder="请输入车架号"]').value,
            consignorName: document.querySelector('input[placeholder="请输入委托商"]').value,
            pickCar: document.querySelector('input[placeholder="请输入提车地点"]').value,
            collectCar: document.querySelector('input[placeholder="请输入收车地点"]').value,
            departurePlace: document.querySelector('input[placeholder="请输入起运地"]').value,
            arrivePlace: document.querySelector('input[placeholder="请输入目的地"]').value,
            departurePort: document.querySelector('input[placeholder="请输入起运港"]').value,
            arrivePort: document.querySelector('input[placeholder="请输入目的港"]').value,
            brandName: document.querySelector('input[placeholder="请输入品牌"]').value,
            transportMode: document.querySelector('.form-select[data-type="transportMode"]').value,
            state: document.querySelector('.form-select[data-type="state"]').value,
            startTime: document.getElementById('ID-laydate-demo1').value ,
            endTime: document.getElementById('ID-laydate-demo2').value ,
            // status: document.querySelector('.form-select').value,
            page: page,
            rows: pageSize
        };

        try {
            const response = await fetch('http://localhost:8080/transportChild/pageList', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(queryParams)
            });

            const data = await response.json();
            if (data.status === 0) {
                renderTable(data);
                // console.log(data.data)
            }else  if (data.status === -1) {
                console.error('请求失败:', error);
            }
        } catch (error) {
            console.error('请求失败:', error);
            renderTable({ data: { records: [], total: 0, current: 1, pages: 0 } });
        }
    }
    //重置按钮
    document.querySelector('.btn-reset').addEventListener('click',()=>{
        document.querySelectorAll('.form-input').forEach(input => {
            if (input.type === 'text') input.value = '';
            if (input.tagName === 'SELECT') input.value = '';
        });

    })
    //新增按钮相关
    // 显示弹窗
    document.querySelector('.btn-add').addEventListener('click', () => {
        document.querySelector('#modal-mask-add').style.display = 'flex'
    })
    // 关闭弹窗
    document.querySelectorAll('.modal-close-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            this.closest('.modal-mask').style.display = 'none';
        });
    });

    document.querySelectorAll('.btn-close').forEach(btn => {
        btn.addEventListener('click', function() {
            this.closest('.modal-mask').style.display = 'none';
        });
    });
    // 表单提交处理
    document.querySelector('#modal-form-add').addEventListener('submit', async (e) => {
        e.preventDefault();

        const formData = {
            batchNumber: document.getElementById('add-batchNumber').value,
            waybillNo: document.getElementById('add-waybillNo').value,
            frameNumber: document.getElementById('add-frameNumber').value,
            planDate: document.getElementById('add-planDate').value,
            departurePlaceType: document.getElementById('add-startType').value,
            arrivePlaceType: document.getElementById('add-endType').value,
            taskMode: document.getElementById('add-taskMode').value,
            departurePlace: document.getElementById('add-departurePlace').value,
            departurePort: document.getElementById('add-departurePort').value,
            arrivePort: document.getElementById('add-arrivePort').value,
            arrivePlace: document.getElementById('add-arrivePlace').value,
            pickCar: document.getElementById('add-pickCar').value,
            collectCar: document.getElementById('add-collectCar').value,
            brandName: document.getElementById('add-brand').value,
            modelName: document.getElementById('add-modelName').value,
            color: document.getElementById('add-color').value
        };

        try {
            const response = await fetch('http://localhost:8080/transportChild/add', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(formData)
            });

            const data = await response.json();
            if (data.status === 0) {
                alert('添加成功');
                document.getElementById('modal-mask-add').style.display = 'none';
                document.getElementById('modal-form-add').reset();
                fetchData('query');
            } else {
                alert('添加失败：' + (data.message || '未知错误'));
            }
        } catch (error) {
            console.error('提交失败:', error);
            alert('提交失败：' + error.message);
        }
    });
    //表格函数
    async function showHighDetail(item) {
        const modal = document.getElementById('modal-mask-detail');
        try {
            document.getElementById('detail-operationLogs').innerHTML = "加载中...";

            const res = await fetch(`http://localhost:8080/transportChild/detail/${item.id}`);
            const response = await res.json();

            if (response.status === 0) {
                const data = response.data;
                const transportChild = data.transportChild || {};  // 委托车信息
                const operateRecordList = data.operateRecordList || [];  // 操作记录
                // ================= 运输计划信息 =================
                document.getElementById('detail-batchNumber').textContent = data.batchNumber || '--';
                document.getElementById('detail-consignorName').textContent = data.consignorName || '--';
                document.getElementById('detail-transportMode').textContent =
                    data.transportMode === 1 ? "公路" :
                        data.transportMode === 2 ? "水路" :
                            data.transportMode === 3 ? "水陆联运" : "--";

                // ================= 委托车信息 =================
                document.getElementById('detail-frameNumber').textContent = transportChild.frameNumber || '--';
                document.getElementById('detail-waybillNo').textContent = transportChild.waybillNo || '--';
                document.getElementById('detail-planDate').textContent = formatDateTime(transportChild.planDate) || '--';
                document.getElementById('detail-pickCar').textContent = transportChild.pickCar || '--';
                document.getElementById('detail-collectCar').textContent = transportChild.collectCar || '--';
                document.getElementById('detail-brandName').textContent = transportChild.brandName || '--';
                document.getElementById('detail-modelName').textContent = transportChild.modelName || '--';


                // ================= 操作记录 =================
                const logsContainer = document.getElementById('detail-operationLogs');
                if (operateRecordList.length > 0) {
                    logsContainer.innerHTML = operateRecordList.map(log => `
                    <div class="log-item">
                        <span class="log-time">${formatDateTime(log.createTime)}</span>
                        <span class="log-type">${log.operateType}</span>
                        ${log.remark ? `<span class="log-remark">（${log.remark}）</span>` : ''}
                    </div>
                `).join('');
                } else {
                    logsContainer.innerHTML = '<div class="no-data">暂无操作记录</div>';
                }

                modal.style.display = 'flex';
            } else {
                alert('获取详情失败：' + (response.message || '未知错误'));
            }
        } catch (err) {
            console.error('详情加载失败:', err);
            document.getElementById('detail-operationLogs').innerHTML =
                '<div class="error-msg">记录加载失败</div>';
            alert(`加载失败: ${err.message}`);
        }
    }
    // 修改功能弹窗
    let currentEditHandler = null;
    // 修改功能（需要实现编辑弹窗）
    // function updateRole(item) {
    //     // 打开编辑弹窗
    //     // table-edit-btn
    //     const form = document.getElementById('modal-form-update');
    //     const modal = document.querySelector('#modal-mask-update'); // 需要创建编辑弹窗结构
    //     // 关闭旧监听器
    //     if (currentEditHandler) {
    //         form.removeEventListener('submit', currentEditHandler);
    //     }
    //     // 填充表单数据
    //     let typeName= document.querySelector('#edit-roleNm').value = item.typeName;
    //     let explaind=document.querySelector('#edit-explaind').value = item.explaind;
    //
    //
    //
    //     // 绑定提交事件
    //     // 定义新处理器
    //     currentEditHandler = async (e) => {
    //         e.preventDefault();
    //         const formData = {
    //             id: item.id,
    //             typeName: document.querySelector('#edit-roleNm').value,
    //             explaind: document.querySelector('#edit-explaind').value,
    //         };
    //
    //         try {
    //             const res = await fetch('http://localhost:8080/sys/highway/update', {
    //                 method: 'POST',
    //                 headers: {'Content-Type': 'application/json'},
    //                 body: JSON.stringify(formData)
    //             });
    //
    //             const data = await res.json();
    //             if(data.status === 0) {
    //                 modal.style.display = 'none';
    //                 fetchData('query');
    //             }else if (data.status === -1){
    //                 modal.style.display = 'none';
    //             }
    //         } catch(err) {
    //             console.error('更新失败:', err);
    //         }
    //     };
    //     form.addEventListener('submit', currentEditHandler);
    //     modal.style.display = 'flex';
    // }
    // 新增修改功能逻辑

    // 修改表单提交处理
    // document.getElementById('modal-form-update').addEventListener('submit', async (e) => {
    //     e.preventDefault();
    //
    //     const modal = document.getElementById('modal-mask-update');
    //     const id = modal.dataset.currentId;
    //
    //     const formData = {
    //         id: id,
    //         name: document.getElementById('update-name').value,
    //         shortName: document.getElementById('update-shortName').value,
    //         address: document.getElementById('update-address').value,
    //         phone: document.getElementById('update-phone').value,
    //         mailBox: document.getElementById('update-email').value
    //     };
    //
    //     try {
    //         const res = await fetch('http://localhost:8080/sys/highway/update', {
    //             method: 'POST',
    //             headers: { 'Content-Type': 'application/json' },
    //             body: JSON.stringify(formData)
    //         });
    //
    //         const response = await res.json();
    //         if (response.status === 0) {
    //             alert('修改成功');
    //             modal.style.display = 'none';
    //             fetchData('query'); // 刷新表格
    //         } else {
    //             alert('修改失败：' + (response.message || '未知错误'));
    //         }
    //     } catch (err) {
    //         console.error('提交失败:', err);
    //         alert('提交失败：' + err.message);
    //     }
    // });
    function formatDateTime(dateStr) {
        if (!dateStr) return '--';
        const date = new Date(dateStr);
        return date.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        }).replace(/\//g, '-');
    }

    layui.use(function() {
        var laydate = layui.laydate;
        // 渲染
        laydate.render({
            elem: '#ID-laydate-demo1'
        });
        laydate.render({
            elem: '#ID-laydate-demo2'
        });
    });

    function  getStatusText(status){
        if (status ===0){
            return '待分配运输'
        }else if (status ===1){
            return '已分配运输'
        }else if (status ===2){
            return '运输中'
        }else if (status ===3){
            return '已交车'
        }
    }


    // 初始化日期控件
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#add-planDate',
            type: 'datetime'
        });
    });

    // 根据类型显示/隐藏相关字段
    function toggleLocationFields() {
        const startType = document.getElementById('add-startType').value;
        document.getElementById('add-departurePlace').parentElement.style.display =
            startType === '1' ? 'block' : 'none';
        document.getElementById('add-departurePort').parentElement.style.display =
            startType === '2' ? 'block' : 'none';

        const endType = document.getElementById('add-endType').value;
        document.getElementById('add-arrivePlace').parentElement.style.display =
            endType === '1' ? 'block' : 'none';
        document.getElementById('add-arrivePort').parentElement.style.display =
            endType === '2' ? 'block' : 'none';
    }

    // 监听类型变化
    document.getElementById('add-startType').addEventListener('change', toggleLocationFields);
    document.getElementById('add-endType').addEventListener('change', toggleLocationFields);

    // 文件上传处理逻辑
    document.querySelector('.btn-import').addEventListener('click', function() {
        // 创建隐藏的文件输入元素
        const fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.accept = '.xls,.xlsx';
        fileInput.style.display = 'none';

        // 添加事件监听
        fileInput.addEventListener('change', async function(e) {
            const file = e.target.files[0];
            if (!file) return;

            // 创建FormData对象
            const formData = new FormData();
            formData.append('file', file);

            try {
                const response = await fetch('http://localhost:8080/transportChild/importExcelxls', {
                    method: 'POST',
                    body: formData,
                    // 注意：不要设置Content-Type，浏览器会自动处理
                });

                const result = await response.json();
                if (result.status === 0) {
                    alert(`导入成功：${result.message}`);
                    fetchData('query'); // 刷新表格数据
                } else {
                    alert(`导入失败：${result.message}`);
                }
            } catch (error) {
                console.error('上传失败:', error);
                alert('文件上传失败，请检查网络连接');
            }
        });

        // 触发文件选择对话框
        document.body.appendChild(fileInput);
        fileInput.click();
        document.body.removeChild(fileInput);
    });
</script>
</body>
</html>